<template>
  <view class="page-view">
    <view class="top-bg">
      <u-sticky>
        <view class="return" @click="goToBack()">
          <u-icon name="arrow-left" color="#ffffff " bold="true" size="38"></u-icon>
        </view>
        全部待办
        <view class="header-wrap">
          <view class="tab-wrap">
            <view v-for="(item,i) in tabArr" :key="i" class="tab-item"
              :class="{'active-tab':daibanStatus===item.status}" @click="filterStatusSearch(item.status)">
              <view class="tab-label">{{item.title}}</view>
              <view class="status-count" v-if="item.count">({{item.count}})</view>
              <view class="active-bottom-bar"></view>
            </view>
          </view>
          <view class="select-wrap">
            <view class="selectName" @click="typeShow=true">{{typeValue}}
              <image class="arrow" src="../../static/icon/icon-bottom-arrow.png" mode=""></image>
            </view>
            <view class="selectName" @click="statusShow=true">{{statusValue}}
              <image class="arrow" src="../../static/icon/icon-bottom-arrow.png" mode=""></image>
            </view>
            <view class="item_search">
              <u-search shape="round" v-model="timeStr" bgColor="#f2f7f5" height="53" style="pointer-events: none"
                searchIcon="calendar" searchIconSize="26" placeholder="选择时间" :show-action="false" :disabled="true"
                @click="dateShow = true"></u-search>
              <image v-if="clearsDateShow" class="clearImg" src="@/static/login/clear.png" @click="onClearsDate">
              </image>
            </view>
          </view>
        </view>
      </u-sticky>
    </view>
    <view class="posBox">
      <view class="list-wrap" :style="{ height: 'calc(100vh - 298rpx)' }">
        <scroll-view scroll-y="true" class="scroll-Y" @scrolltolower="handleGetMore">
          <view class="task-item" v-for="(item, index) in workList" :key="index">
            <view class="info-row"> <text>设备类型</text>{{item.equtype}} </view>
            <view class="info-row"> <text>设备名称</text>{{ item.name }}</view>
            <view class="info-row"> <text>设备编号</text>{{ item.equNo }}</view>
            <view class="info-row"> <text
                style='text-align:center;'>进出口</text>{{ item.drain==1?'进口':item.drain==2?'出口':''}}</view>
            <view class="info-row"> <text>问题类型</text>{{ item.wtType }}</view>
            <view class="info-row2">
              <view style="color: #989898">问题描述</view>
              <view style="width: 78%;color: #5e5e5e;">{{ item.wtDetail }}</view>
            </view>
            <view class="info-row"><text>报警时间</text>{{ item.time }}</view>
            <view class="btn-item" @click="goTaskDispose(item)">问题处理</view>
          </view>
        </scroll-view>
        <u-picker :show="typeShow" keyName="itemText" :columns="columns1" @confirm="bindPickerChange1"
          @cancel="typeShow=false"></u-picker>
        <u-picker :show="statusShow" keyName="itemText" :columns="columns2" @confirm="bindPickerChange2"
          @cancel="statusShow=false"></u-picker>
        <van-calendar :show="dateShow" ref="calendar" :maxDate="maxDate" :minDate="minDate" monthNum="24" rowHeight="55"
          color="rgba(39, 105, 247, 1)" title="选择时间" type="range" @confirm="dateConfirm" @close="dateClose">
        </van-calendar>
      </view>
    </view>
    <u-popup :show="disposeShow" @close="close" @open="open" mode="center" round="10" closeable overlayOpacity='0.2'
      customStyle='margin: 0rpx 40rpx;'>
      <view class="title">问题处理弹窗</view>
      <view class="infoBox">
        <view class="info-row"> <text>设备类型</text>{{item.equtype}} </view>
        <view class="info-row"> <text>设备编号</text>{{ item.equNo }}</view>
        <view class="info-row2">
          <view style="color: #989898">问题描述</view>
          <view style="width: 81%;color: #5e5e5e;">{{ item.wtDetail }}</view>
        </view>
        <view class="info-row3">
          <text style="color: #989898">现场情况</text>
          <u--input border="surround" clearable v-model="xcqk" disabledColor="#ffffff" placeholder="请输入"></u--input>
        </view>
        <view class="info-row3">
          <text style="color: #989898">处理措施</text>
          <u--input v-model="clcs" disabledColor="#ffffff" placeholder="请输入"></u--input>
        </view>
        <view class="info-row"> <text>照片</text></view>
      </view>
      <view class="submitBtn">
        <u-button @click="submit" :loading="loading" class="custom-style" text="提交" color="#428ffc" throttleTime="1000">
        </u-button>
      </view>
    </u-popup>
  </view>
</template>
<script>
import { getDictItemInfo } from '@/api/system.js';
export default {
  filters: {
    showTastStatusText() {
      return '--';
    },
  },
  data() {
    return {
      daibanStatus: '',
      tabArr: [{
        title: "全部",
        count: 7,
        status: '',
      }, {
        title: "未处理",
        count: 5,
        status: '1',
      }, {
        title: "已处理",
        count: 2,
        status: '2',
      }],
      columns1: [
        ['全部', '日常运维', '工单处理', '水质检测', '公众反馈']
      ],
      columns2: [
        ['全部', '已处理', '未处理']
      ],
      timeStr: '',
      disposeShow: false,
      equTypeList: [],
      typeShow: false,
      statusShow: false,
      typeValue: '全部',
      statusValue: '全部',
      clearsDateShow: false,
      startTime: '',
      endTime: '',
      dateShow: false,
      maxDate: new Date().valueOf(),
      minDate: new Date('2024-01-01').getTime(),
      policeList: [],
      total: null,
      pageNo: 1,
      pageSize: 9999,
      params: {
        status: '',
        woType: '',
        areaId: '1698943710333108226',
        areaName: '永康开发区',
        column: 'createTime',
        order: 'desc',
      },
      workList: [
        {
          equtype: "液位计",
          name: '汪家村农污终端进口液位计',
          equNo: '458793214569',
          drain: 1,
          wtType: '液位报警',
          wtDetail: "液位计一进口，液位上涨35%，液位高度2.5m，液位超出安全水位，存在污水外溢风险。",
          time: '2024.06.07 08:50'
        }, {
          equtype: "液位计",
          name: '汪家村农污终端进口液位计',
          equNo: '458793214569',
          drain: 1,
          wtType: '液位报警',
          wtDetail: "液位计一进口，液位上涨35%，液位高度2.5m，液位超出安全水位，存在污水外溢风险。",
          time: '2024.06.07 08:50'
        }, {
          equtype: "液位计",
          name: '汪家村农污终端进口液位计',
          equNo: '458793214569',
          drain: 1,
          wtType: '液位报警',
          wtDetail: "液位计一进口，液位上涨35%，液位高度2.5m，液位超出安全水位，存在污水外溢风险。",
          time: '2024.06.07 08:50'
        }
      ],
      taskList: [],
      policeTypeShow: false,
      woType: '',

    };
  },
  created() {

  },
  mounted() { },
  methods: {
    goToBack() {
      wx.navigateBack({
        delta: 1
      });
    },
    filterStatusSearch(status) {
      this.daibanStatus = status;

    },
    goTaskDispose(i) {
      this.item = i
      this.disposeShow = true
    },
    dateConfirm(e) {
      this.startTime = new Date(e.detail[0]).format('yyyy-MM-dd')
      this.endTime = new Date(e.detail[e.detail.length - 1]).format('yyyy-MM-dd')
      this.timeStr = this.startTime + '~' + this.endTime
      this.dateShow = false
      this.clearsDateShow = true
    },
    dateClose() {
      this.dateShow = false
    },
    onClearsDate() {
      this.timeStr = ''
      this.startTime = ''
      this.endTime = ''
      this.clearsDateShow = false
    },
    open() {
      // console.log('open');
    },
    close() {
      this.disposeShow = false
      // console.log('close');
    },
    bindPickerChange1: function (e) {
      this.typeValue = e.value[0];
      this.typeShow = false
    },
    bindPickerChange2: function (e) {
      this.statusValue = e.value[0];
      this.statusShow = false
    },
    onConfirmDate(e) {
      this.datetimeShow = false
      // this.value1=e.value
      // console.log(this.value1);
      setTimeout(() => {
        this.value1 = new Date(e.value).format("yyyy-MM-dd");
      }, 100);
      // this.timeTitle=this.value1+'-'+this.value2
    },
    onConfirmDate2(e) {
      this.datetimeShow2 = false
      setTimeout(() => {
        this.value2 = new Date(e.value).format("yyyy-MM-dd");
      }, 100);

    },
    // filterIsExpire(dateStr) {
    //   if (dateStr) {
    //     dateStr = dateStr.replaceAll('-', '/');
    //     return new Date(dateStr).getTime() < new Date().getTime();
    //   } else {
    //     return false;
    //   }
    // },
    handleGetMore() {
      this.pageNo++;
      if (this.total && this.taskList.length >= this.total) {
        return;
      }
      // this.handleGetTaskList();
    }
  },
};
</script>
<style scoped lang="scss">
.page-view {
  height: 100vh;
  // background: #f8f9fb;
  position: relative;
  overflow: hidden;
}
.posBox {
  position: absolute;
  top: 438rpx;
}
.top-bg {
  width: 100%;
  height: 330rpx;
  background: #2769f7;
  border-radius: 0rpx 0rpx 140rpx 140rpx;
  padding-top: 104rpx;
  text-align: center;
  font-weight: 600;
  font-size: 40rpx;
  color: #ffffff;
  letter-spacing: 4rpx;
  position: relative;
  .return {
    position: absolute;
    left: 32rpx;
    margin-top: 8rpx;
  }
}
.tab-wrap {
  display: flex;
  flex: 1;
  justify-content: space-between;
  align-items: center;
  color: #666666;
  font-size: 32rpx;
}

.tab-item {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
  height: 80%;
}
.active-tab {
  color: #333333;

  .active-bottom-bar {
    display: block;
  }
}

.active-bottom-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  display: none;
  width: 24rpx;
  height: 6rpx;
  background: #3296fa;
  border-radius: 3rpx;
}
.header-wrap {
  margin: 52rpx 32rpx 0 32rpx;
  background: #ffffff;
  border-radius: 10rpx 10rpx 10rpx 10rpx;
  padding: 32rpx;
}
.select-wrap {
  // position: relative;
  margin-top: 32rpx;
  display: flex;
  align-items: center;
  color: #fff;
  margin-bottom: 32rpx;
  font-weight: bold;
  font-size: 28rpx;
  margin-left: 8rpx;
  letter-spacing: 1rpx;
  .item_search {
    font-weight: 400;
    font-size: 24rpx;
    color: #4a4a4a;
    width: 56%;
    position: relative;
    .clearImg {
      position: absolute;
      width: 25rpx;
      height: 25rpx;
      right: 8rpx;
      bottom: 16rpx;
    }
  }
  .selectName {
    width: 160rpx;
    height: 56rpx;
    padding: 0 10rpx;
    line-height: 56rpx;
    background: #f2f6f7;
    border-radius: 32rpx 32rpx 32rpx 32rpx;
    font-weight: 400;
    font-size: 24rpx;
    color: #4a4a4a;
    margin: 0 8rpx;
    overflow: hidden;
    .arrow {
      width: 16rpx;
      height: 10rpx;
      vertical-align: middle;
      margin-left: 30rpx;
    }
  }
}
.scroll-Y {
  height: 100%;
}

.task-item {
  // width: 636rpx;
  // height: 556rpx;
  position: relative;
  margin: 16rpx 32rpx;
  background: #ffffff;
  border-radius: 10rpx 10rpx 10rpx 10rpx;
  padding: 32rpx 14rpx 116rpx 32rpx;
  font-weight: bold;
  font-size: 28rpx;
}
.info-row2 {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8rpx;
}
.info-row3 {
  display: flex;
  align-items: center;
  margin-bottom: 16rpx;
}
.info-row {
  color: #5e5e5e;
  margin-bottom: 8rpx;
  text {
    width: 22%;
    color: #989898;
    display: inline-block;
  }
}
.btn-item {
  position: absolute;
  right: 26rpx;
  bottom: 32rpx;
  width: 168rpx;
  height: 60rpx;
  text-align: center;
  line-height: 60rpx;
  background: #3c8aff;
  border-radius: 30rpx 30rpx 30rpx 30rpx;
  cursor: pointer;
  font-weight: 400;
  color: #fff;
}
.title {
  text-align: center;
  margin-top: 32rpx;
  font-weight: 800;
  font-size: 32rpx;
  color: #4a4a4a;
}
.infoBox {
  margin: 32rpx 24rpx 0 24rpx;
  font-weight: bold;
  font-size: 24rpx;
  text {
    width: 19%;
  }
}
.submitBtn {
  margin: 132rpx 48rpx 32rpx 48rpx;
}
/deep/ .u-input--radius {
  // width: 324rpx;
  // height: 60rpx;
  background: #f2f6f7;
  border-radius: 10rpx 10rpx 10rpx 10rpx;
}
/deep/ .u-search__content {
  padding: 0 10rpx !important;
}
</style>
